<template>
  <div>
    <el-drawer
      :visible.sync="dialog"
      direction="rtl"
      :with-header="false"
      ref="drawer"
      size="700px"
    >
      <div style="margin:20px">
        <el-form label-position="right" label-width="130px" :inline="true" :model="form" ref="form" :disabled="disabled">
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="所属项目:" style="width:100%">
                <el-select v-model="form.projectId" clearable placeholder="所属项目..." class="form-inputB" @change="getProjectId" size="small">
                  <el-option-group :key="group.label" :label="group.label" v-for="group in projectList">
                    <el-option v-for="item in group.projectList"
                      :key="item.projectId"
                      :value="item.projectId"
                      :label="item.projectName"
                    />
                  </el-option-group>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所属模块:" style="width:100%">
                <el-cascader
                v-model="form.moduleId"
                :options="moduleList"
                :props="{label:'moduleName', value: 'moduleId', children: 'children'}"
                clearable
                placeholder="所属模块..."
                size="small"
                class="form-inputB">
                </el-cascader>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="开发负责人:" style="width:100%">
                <el-select v-model="form.devPersion" placeholder="请选择" class="form-inputB" size="small">
                  <el-option v-for="item in devUserList" :key="item.userId" :label="item.userName" :value="item.userId">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="测试负责人:" style="width:100%">
                <el-select v-model="form.testPerson" placeholder="请选择" class="form-inputB" size="small">
                  <el-option v-for="item in testUserList" :key="item.userId" :label="item.userName" :value="item.userId">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="计划完成版本:" style="width:100%">
                <el-select v-model="form.vesrion" placeholder="请选择活动区域" class="form-inputB" size="small">
                  <el-option v-for="item in versionList" :key="item.key" :value="item.key" :label="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="计划投产时间:" style="width:100%">
                <el-date-picker v-model="form.commission" type="date" placeholder="选择日期" style="width:178px" value-format="yyyy-MM-dd" size="small">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="计划开发开始时间:" style="width:100%">
                <el-date-picker v-model="form.devStart" type="date" placeholder="选择日期" style="width:178px" value-format="yyyy-MM-dd" size="small">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="计划开发结束时间:" style="width:100%">
                <el-date-picker v-model="form.devEnd" type="date" placeholder="选择日期" style="width:178px" value-format="yyyy-MM-dd" size="small">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="24">
              <el-form-item label="任务分解:" style="width:100%">
                <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="form.decomposition" style="width:520px" size="small"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="24">
              <el-form-item label="任务详细描述:" style="width:100%">
                <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="form.describe" style="width:520px" size="small">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="24">
              <el-form-item label="备注:" style="width:100%">
                <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="form.remarks" style="width:520px" size="small">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { findById } from '@/api/task'
import { getVersion } from '@/api/version'
  export default {
    name: "PopVue",
    props: ['role'],
    mounted() {

    },
    data() {
      return {
        dialog: false,
        isView: true,
        showAdd: true,
        versionList: [],
        projectList: [],
        baseProjectList: [],
        userList: [],
        devUserList: [],
        testUserList: [],
        moduleList: [],
        disabled: false,
        form: {
          taskId: '',
          projectId: '',
          testPerson: '',
          version: '',
          devPerson: '',
          commission: '',
          devStart: '',
          devEnd: '',
          adjustStart: '',
          decomposition: '',
          describe: '',
          selfTest: '',
          remarks: '',
          group: '',
          moduleId: ''
        },
        timer: null
      };
    },
    methods: {
      showView(row) {
        this.dialog = true
        this.getParentData()
        findById(row.taskId).then(response => {
          this.form.taskId = row.taskId
          this.form.projectId = response.projectId
          this.initModuleList(row.projectId)
          this.form.testPerson = row.testPerson
          this.form.devPersion = row.devPerson
          this.form.moduleId = response.moduleId
          this.form.vesrion = response.completeVersion
          this.form.commission = row.commission
          this.form.devStart = response.devBegin
          this.form.devEnd = response.devEnd
          this.form.adjustStart = response.realBegin
          this.form.adjustEnd = response.realEnd
          this.form.decomposition = response.decomposition
          this.form.describe = response.describe
          this.form.selfTest = response.self
          this.form.remarks = response.remarks
        })
      },
      getParentData() {
        getVersion().then(response => {
          this.versionList = response
        })
        this.form.group = this.$parent.$parent.popData.group
        this.projectList = this.$parent.$parent.projectList
        this.userList = this.$parent.$parent.popData.userList
        this.baseProjectList = this.$parent.$parent.popData.projectList
        this.devUserList = []
        this.testUserList = []
        this.userList.length>0?this.userList.forEach(element=>{element.role==="leader"||element.role==="developer"?this.devUserList.push(element):this.testUserList.push(element)}):console.log("用户列表为空，请先维护组内用户")

      },
      initModuleList(projectId) {
        this.moduleList = []
        for (let i=0; i<this.baseProjectList.length; i++) {
          if (projectId===this.baseProjectList[i].projectId) {
            this.moduleList = this.baseProjectList[i].modules
          }
        }
      },
      getProjectId() {
        for (let index = 0; index < this.baseProjectList.length; index++) {
          if (this.form.projectId===this.baseProjectList[index].projectId) {
            this.moduleList = this.baseProjectList[index].modules
            if (this.baseProjectList[index].modules.length>0) {
              this.form.moduleId = this.baseProjectList[index].modules[0].moduleId
            }
          }
        }
      }
    }
  }

</script>

<style>
.el-form-item__content{
  margin-left:0 !important;
}
.form-inputA{
      width: 520px;
}
.form-inputB{
      width: 178px;
}
</style>
